<template>
  <div :class="['row',noborder?'noborder':'']" @click="rowClick">
    <slot name="rowLeft" />
    <div class="row-title">{{title}}</div>
    <div class="row-right">
  
      <div class="value">{{value}}</div>
      <div class="placeholder" v-if="!value&&placeholder&&value!==0">{{placeholder}}</div>
      <slot name="rowRight" />
      <div class="isclick" v-if="isclick"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title:{ type:String },
    isclick: {type:Boolean},
    value: {type:String | Number},
    placeholder: {type:String},
    noborder: {type:Boolean},
  },
  data() {
    return { 
    };
  }, 
  mounted() {
    
  },
  beforeDestroy() {
  },
  methods: {
    rowClick(){
        this.$emit("rowClick")
    }
  }
};
</script>

<style lang="less" scoped>
.row{
    display: flex;
    justify-content: space-between;
    padding: 2px 20px;
    align-items: center;
    min-height: 44px;
    position: relative;
    .row-right{
      display: flex; 
      align-items: center;
    }
    .value{
      color: #666;
      text-align: left;
    }
    .isclick{
      margin-left: 4px;
    }
    &:active{
        opacity: .7;
    }
    &::before{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        // width: 97.5%;
        left: 20px;
        height: 1px;
        background: #eee;

    }
    &.noborder::before{
      display: none;
    }
    .row-title{
      white-space: nowrap;
      margin-right: 20px;
    }
}
.placeholder{
  color: #999;
}

</style>